<template>
  <div class="grid-content fixed-page visual-page">
    <div class="auto-row">
      <el-tooltip content="返回">
        <el-button
          type="primary" icon="el-icon-arrow-left" circle style="margin-bottom: 18px;margin-right: 10px;"
          @click="$router.go(-1)"
        ></el-button>
      </el-tooltip>
    </div>
    <grid-item-one title="综合能源消费量对比"></grid-item-one>
    <bar-chart title="全社会煤炭消费量" unit="万吨"></bar-chart>
    <bar-chart title="工业企业综合能源消费量" unit="万吨标准煤"></bar-chart>
    <bar-chart title="工业企业产值单耗" unit="吨标准煤/万元"></bar-chart>
    <bar-chart title="工业企业工业总产值" unit="亿元"></bar-chart>
    <bar-chart title="工业企业原煤消耗" unit="万吨"></bar-chart>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import BarChart from './bar-chart'

export default {
  name: 'macro-analysis',
  components: {
    GridItemOne,
    BarChart
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr 1fr;
    grid-gap: $gutter;

    ::v-deep .content-block {
      background: transparent;
      border-radius: 4px;
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }

    .auto-row {
      grid-column-start: 1;
      grid-column-end: 4;
    }
  }
</style>
